<template>
  <div id="order-dialog" class="order-detail-page" v-if="detail.order.id>0" style="width:1600px; margin: 0px auto; margin-left: 20px">
    <div class="custom-table custom-table-2" style="margin-top: 20px">
      <div class="row">
        <div class="left">订单编号:</div>
        <div class="right" v-text="detail.order.orderNo"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">下单时间:</div>
        <div class="right" v-text="detail.order.createdAt"></div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">订单状态:</div>
        <div class="right">
          <el-tag type="success" v-text="detail.order.status.name"></el-tag>
        </div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">配送费用:</div>
        <div class="right price-font" v-text="'￥'+ToMoney(detail.order.expressPrice)"></div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">物流方式:</div>
        <div class="right">
          <span v-text="detail.order.sendType.name"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">支付方式:</div>
        <div class="right" v-text="detail.order.payType.name"></div>
        <div class="c"></div>
      </div>

      <div class="row" v-if="detail.order.applyStatus">
        <div class="left">退换货状态:</div>
        <div class="right" v-text="detail.order.applyStatus.name"></div>
        <div class="c"></div>
      </div>
      <div class="row" v-if="detail.order.applyType">
        <div class="left">退换货类型:</div>
        <div class="right" v-text="detail.order.applyType.name"></div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">订单总价:</div>
        <div class="right">
          <span class="price-font" v-text="'￥'+ToMoney(detail.order.price)"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">支付时间:</div>
        <div class="right" v-text="detail.order.payTime?detail.order.payTime:'-'"></div>
        <div class="c"></div>
      </div>

      <div class="row" v-if="detail.order.sendType.id!==2">
        <div class="left">收货人-姓名&电话:</div>
        <div class="right">
          <el-tag v-text="detail.orderAddress.name"></el-tag>
          <el-tag v-text="detail.orderAddress.mobile"></el-tag>
        </div>
        <div class="c"></div>
      </div>
      <div class="row" v-if="detail.order.sendType.id!==2">
        <div class="left">收货人地址:</div>
        <div class="right">
          <div id="addressDetail" v-text="detail.orderAddress.addressDetail"></div>
        </div>
        <div class="c"></div>
      </div>

      <div class="row" v-if="detail.order.isInvoice.id===1">
        <div class="left">发票人-名称:</div>
        <div class="right">
          <el-tag v-text="detail.order.invoiceName"></el-tag>
        </div>
        <div class="c"></div>
      </div>
      <div class="row" v-if="detail.order.isInvoice.id===1">
        <div class="left">发票人-纳税编号:</div>
        <div class="right">
          <el-tag type="success" v-text="detail.order.invoiceNumber"></el-tag>
        </div>
        <div class="c"></div>
      </div>

      <div class="row" v-if="detail.order.isInvoice.id===1">
        <div class="left">发票人-地址&联系电话:</div>
        <div class="right">
          <span v-text="detail.order.invoiceAddressMobile"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="row" v-if="detail.order.isInvoice.id===1">
        <div class="left">发票人-银行&账号信息:</div>
        <div class="right" v-text="detail.order.invoiceBankAccount"></div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>
    <div style="margin-top: 10px;">
      <div class="order-product-list">
        <product-item :curr-product="{
              id:product.productId,
              price:product.productPrice,
              model:product.productModel,
              nums:product.productNums,
              name:product.productName,
              image:product.productImage,
              score:product.score,
            }" v-for="(product,index) in detail.orderProductList" :key="index"/>
      </div>
      <div class="price-box">
        <div class="total-line" style="margin-top: 10px;">
          商品总价: <span class="price-font" v-text="ToMoney(detail.order.productPrice)"></span>
        </div>
        <div class="total-line" v-if="detail.order.sendPrice>0">
          配送费: <span class="price-font" v-text="'+'+ToMoney(detail.order.sendPrice)"></span>
        </div>
        <div class="total-line" v-if="detail.order.fullMinusPrice>0">
          店铺满减: <span class="price-font" v-text="'-'+ToMoney(detail.order.fullMinusPrice)"></span>
        </div>
        <div class="total-line" v-if="detail.couponPrice>0">
          优惠券: <span class="price-font" v-text="'-'+ToMoney(detail.order.couponPrice)"></span>
        </div>
        <div class="total-line" v-if="detail.order.shopDiscountPrice>0">
          店铺其他折扣: <span class="price-font" v-text="'-'+ToMoney(detail.order.shopDiscountPrice)"></span>
        </div>
        <div class="total-line" v-if="detail.order.price>0">
          实际费用: <span class="price-font" v-text="'￥'+ToMoney(detail.order.price)"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import ProductItem from '../Common/ProductItem'

export default {
  name: 'OrderDetailPage',
  components: {ProductItem, },
  mounted () {
    // this.$refs.myCommonListTable.setListData(DemoData.SysUser.list)
    var CurrOrderDetailCacheString = localStorage.getItem("CurrOrderDetailCache")
    if (CurrOrderDetailCacheString){
      this.detail=JSON.parse(CurrOrderDetailCacheString)
      setTimeout(function () {
        window.print()
      },1000)
    }
  },
  data:function () {
    return {
      detail: {
        "orderAddress": {
        },
        "orderExpress": {

        },
        "allExpressList": {

        },
        "orderProductList": [

        ],
        "orderApply": [],
        "order": {}
      }
    }
  },
  methods:{
    getTableHeight:function () {
      var height=this.getWinSize().height-225
      return height>500?height:500
    },
    // 初始化查询
      searchList:function () {
      // 表格列表,查询参数
      var listTableForm=this.$refs.myCommonListTable.formData

      // 搜索栏,查询参数
      var searchBarForm=this.$refs.commonListSearchBar.getFormData()

      var form=Object.assign({},listTableForm,searchBarForm)
      // 如果有默认排序 && 默认排序数据未设置,就进行查询请求(默认排序设置会触发查询)
      if (this.listTableSitting.defaultSort && this.listTableSitting.defaultSort.prop && this.$refs.myCommonListTable.formData.sortOrder===''){
        return ''
      }else{

      }
      let $this=this
      $this.loading=true
      $this.MyRequest($this.ApiDoNameShop+'Banner/getList',form,function (data) {
        $this.$refs.myCommonListTable.setListData(data)
        $this.loading=false
        $this.$forceUpdate()
      })
      // console.log('全部,查询参数',form)
    },
    // 删除单条数据
    del:function (info) {
      this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let $this=this
        $this.loading=true
        $this.MyRequest($this.ApiDoNameShop+'SysUser/delete',{id:info.rowInfo.id},function () {
          $this.loading=false
          $this.$message({
            type: 'success',
            message: '删除成功'
          },function () {
            $this.loading=false
          });
          $this.searchList()
          $this.$forceUpdate()
        })
      })
    },
    // 创建用户
    createBanner:function (infoParams) {
      var infoData={}
      if (infoParams && infoParams.rowInfo){
        infoData=infoParams.rowInfo
      }
      this.$refs.createBannerDialog.open(infoData)
    }
  }
}
</script>

<style>
#order-dialog .total-line{ text-align: right; padding-right: 5px; line-height: 25px;}
</style>
